<!-- 赠送数量 -->
<template>
	<view class="container">
		<view class="icon">
			<image src="../../../static/images/center/iconGift.png" mode=""></image>
			<text>
				{{person}}
				{{phone}}
			</text>
		</view>
		<view class="nowShell">
			<view>
				<image src="../../../static/images/public/shellIcon.png" mode=""></image>
				<text>{{shellNum}}</text>
			</view>
			<text>当前拥有黑贝壳</text>
		</view>
		<view class="inputBox">
			<text class="phone" :animation="animationData1">赠送数量</text>
			<input type="digit" v-model="giveNum" placeholder="请输入赠送数量"/>
			<text class="err">黑贝壳将会实时赠送到对方账户，无法退回，请仔细核对</text>
		</view>
		<button @tap="active&&sub()" :class="active?'active':''" class="sub" type="default">确认赠送</button>
	</view>
</template>

<script>
	import {giftShell} from "@/api/shell.js"
	export default {
		data() {
			return {
				shellNum: null,
				phone: "",
				giveNum: null,
				active: false,
				animationData1: {},
				person: ''
			};
		},
		onLoad(options) {
			this.phone = options.phone
			this.person = options.msg
		},
		onShow() {
			this.shellNum = uni.getStorageSync("userInfo").shellCount.list[0].count
			var animation = uni.createAnimation({
				duration: 200,
				timingFunction: 'ease',
			})
			this.animation = animation
		},
		watch: {
			giveNum: {
				deep: true,
				handler(val, oldval) {
					this.blur();
				}
			}
		},
		methods: {
			blur() {
				if (this.giveNum) {
					this.active = true
					this.animation.opacity(1).step()
					this.animationData1 = this.animation.export()
				} else {
					this.active = false
					this.animation.opacity(0).step()
					this.animationData1 = this.animation.export()
				}
			},
			sub() {
				if(this.giveNum && this.giveNum == 0) {
					uni.showToast({
						icon:"none",
						title:"赠送数量必须大于0"
					})
					return
				} 
				
				uni.showModal({
					content: `黑贝壳将会实时赠送到对方账户,无法退回,确定赠送？`,
					success:(res) => {
						if(res.confirm){
							uni.showLoading({mask:true})
							giftShell({
								number:this.giveNum,
								phone:this.phone,
								step: 2
							}).then(res => {
								uni.hideLoading()
								let info = uni.getStorageSync("userInfo")
								info.shellCount.list[0].count =  String((parseInt(info.shellCount.list[0].count) - parseInt(this.giveNum)).toFixed(2))
								uni.setStorageSync("userInfo", info)
								uni.redirectTo({
									url: `./success?phone=${this.phone}&num=${this.giveNum.toString()}&msg=${this.person}`
								})
							})
						}else{
							uni.navigateBack({})
						}
					}
				})
				
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		position: relative;

		.icon{
			padding-top: 100rpx;
			image{
				display: block;
				margin: 0 auto 24rpx;
				width: 128rpx;
				height: 128rpx;
				border-radius: 64rpx;
			}
			text{
				display: block;
				text-align: center;
				font-size:24rpx;
				font-weight:bold;
				color:rgba(51,51,51,1);
			}
		}
		.nowShell{
			padding-top: 200rpx;
			view{
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 60rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
				text{
					font-size:50rpx;
					font-weight:bold;
					color:rgba(51,51,51,1);
				}
			}
			>text{
				display: block;
				text-align: center;
				margin-top: 14rpx;
				font-size:26rpx;
				font-weight:400;
				color:rgba(51,51,51,1);
			}
		}
		.inputBox{
			padding: 150rpx 78rpx 0;
			.phone{
				opacity: 0;
				font-size:28rpx;
				font-weight:400;
				color:rgba(153,153,153,1);
			}
			input{
				margin-top: 10rpx;
				border-bottom: 1rpx solid #eee;
				font-size:28rpx;
				font-weight:bold;
				color:rgba(51,51,51,1);
				line-height: 40rpx;
			}
			.err {
				font-size:24rpx;
				font-weight:400; 
				color:#999;
			}
		}
		.sub{
			margin: 100rpx auto 0;
			width:600rpx;
			color: #fff;
			height:80rpx;
			line-height:80rpx;
			background:rgba(220, 220, 220, 1);
			border-radius:40rpx;
			font-size:32rpx;
			font-weight:bold;
		}
		.active{
			background: $theme-color;
		}
	}
</style>
